$grid-prefix: $css-prefix;

.#{$grid-prefix}select-selection{
  display: inline-block;
  width: 100%;
  border: 1px solid $border-color;
  border-radius: px-or-rem(5);
  cursor: pointer;
  user-select: none;
  font-size: px-or-rem(14);
  &:hover{
    border: 1px solid $primary-color;
    @include box-shadow(-px-or-rem(1) px-or-rem(0) px-or-rem(2) $primary-color);
  }
  .#{$grid-prefix}select-header{
    padding: px-or-rem(5);
    padding-right: px-or-rem(20);
    min-height: px-or-rem(20);
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    position: relative;
    .#{$grid-prefix}checked-list{

      .#{$grid-prefix}tag-checked{
        display: inline-block;
        background-color: darken(#fff, 10%);
        border-radius:px-or-rem(5); 
        color: $text-color;
        cursor: pointer;
        padding-left: px-or-rem(10);
        margin: px-or-rem(1);
        // margin-bottom: px-or-rem(5);
        .tag-text{
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
        }
        .tag-icon{
          margin: 0 px-or-rem(10);
  
        }
      }

    }
    .#{$grid-prefix}select-icon-cont{
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      .#{$grid-prefix}select-arrow{
        cursor: pointer;
        padding: px-ro-rem(2);
        transition: all .5s ease-in-out;
      }
      .#{$grid-prefix}select-clear{
        display: none;
        // cursor: pointer;
        // color:#808695; 
      }
      .#{$grid-prefix}select-arrow-checkd{
        transform: rotate(180deg)
      }
      
    }
    .#{$grid-prefix}select-icon-clear:hover{
      .#{$grid-prefix}select-arrow{
        display: none;
      }
      .#{$grid-prefix}select-clear{
        display: inline-block;
        cursor: pointer;
        color:#808695; 
      }
    }
    
  }
  .#{$grid-prefix}select-opction{
    // position: absolute;
    // top: px-or-rem(36);
    // left: 0;
    // width: px-or-rem(200);
    background-color: white;
    z-index: 999;
  }
}
.#{$grid-prefix}select-disabled{
  cursor: not-allowed;
  background-color: darken(#fff, 10%);
  &:hover{
    border: 1px solid $border-color;
    box-shadow: none;
  }
  .#{$grid-prefix}select-header{
    .#{$grid-prefix}select-icon-cont{
      .#{$grid-prefix}select-arrow{
        cursor: not-allowed;
      }
      .#{$grid-prefix}select-clear{
      }
      .#{$grid-prefix}select-arrow-checkd{
      }
      
    }
  }
}
.#{$grid-prefix}select-dropdown{
  max-height: px-or-rem(300);
  overflow-y: auto;

}
.#{$grid-prefix}dropdown-list{
  list-style: none;
  padding: px-or-rem(2) 0;
  margin: 0;
  cursor: pointer;
  border: 1px solid $border-color;
  border-radius: px-or-rem(5);
  background-color:white;  
  .#{$grid-prefix}dropdown-item{
    padding: px-or-rem(2) px-or-rem(10);
    position: relative;
    .item-text{
      display: inline-block;
      white-space: normal;
      word-break: break-all;
      word-wrap: break-word;
      line-break: strict;
      max-width: 80%;
    }
    .item-right{
      position: absolute;
      top: 50%;
      right:  px-or-rem(10);
      transform: translateY(-50%);
    }
  }
  .#{$grid-prefix}dropdown-item:hover{
    background-color: darken(#fff, 10%);
  }
  .#{$grid-prefix}dropdown-disabled{
    cursor: not-allowed;
    color: darken(#fff, 20%);
    &:hover{
      background-color:transparent !important;
    }
  }
  .#{$grid-prefix}dropdown-checked{
    color: $primary-color;
   
  }
  .#{$grid-prefix}dropdown-isFocused{
    background-color: darken(#fff, 10%);
  }
};


.#{$grid-prefix}select-small{
  font-size: px-or-rem(12);
  .#{$grid-prefix}select-header{
    min-height: px-or-rem(16);
  }
}
.#{$grid-prefix}select-large{
  font-size: px-or-rem(14);
  .#{$grid-prefix}select-header{
    min-height: px-or-rem(24);
  }
}